import React from 'react';
import {injectIntl} from './intl';
import PropTypes from 'prop-types';
import {Modal, Card} from 'antd';
import {conventEnumValueToString} from '../utils';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import {baseDataStatus, productLifeCycle} from '../Enum';
const {Description} = DescriptionList;

class ModeDetail extends React.PureComponent {
    componentWillUnmount() {
        this.ismounted = false;
        Modal.destroyAll();
    }
    render() {
        const {formatMessage} = this.props.intl;
        const data = this.props.detail;
        return (
            <div>
                <Modal
                    title={formatMessage({
                        id: 'modeDetail.modale.title',
                        defaultMessage: '产品详情'
                    })}
                    width="60%"
                    maskClosable={false}
                    destroyOnClose={true}
                    visible={this.props.showPanel}
                    onCancel={this.props.onCancel}
                    footer={[]}>
                    <Card>
                        <DescriptionList size="large" title={formatMessage({
                            id: 'detail.operation.detail',
                            defaultMessage: '基础信息'
                        })}>
                            <Description term={formatMessage({
                                id: 'detail.operation.version',
                                defaultMessage: '版型'
                            })}>{data.version}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.code',
                                defaultMessage: '产品编号'
                            })}>{data.code}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.name',
                                defaultMessage: '产品名称'
                            })}>{data.name}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.color',
                                defaultMessage: '颜色'
                            })}>{data.color}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.colorCode',
                                defaultMessage: '颜色码'
                            })}>{data.colorCode}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.status',
                                defaultMessage: '状态'
                            })}>{conventEnumValueToString(baseDataStatus, data.status)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.isUncommon',
                                defaultMessage: '小品种车型'
                            })}>{data.isUncommon}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.isSpecial',
                                defaultMessage: '特殊车型'
                            })}>{data.isSpecial}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.versionDescription',
                                defaultMessage: '版型描述'
                            })}>{data.versionDescription}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.orderCycle',
                                defaultMessage: '订货周期'
                            })}>{data.orderCycle}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.purchaseCycle',
                                defaultMessage: '采购周期'
                            })}>{data.purchaseCycle}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.engineCylinder',
                                defaultMessage: '排量'
                            })}>{data.engineCylinder}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.emissionStandard',
                                defaultMessage: '尾气排放标准'
                            })}>{data.emissionStandard}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.transmission',
                                defaultMessage: '手自动'
                            })}>{data.transmission}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.fuelType',
                                defaultMessage: '燃油类型'
                            })}>{data.fuelType}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.productLifeCycle',
                                defaultMessage: '产品生命周期'
                            })}>{conventEnumValueToString(productLifeCycle, data.productLifeCycle)}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.interior',
                                defaultMessage: '内饰'
                            })}>{data.interior}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.technicalNotes',
                                defaultMessage: '技术参数说明'
                            })}>{data.technicalNotes}
                            </Description>
                            <Description term={formatMessage({
                                id: 'detail.operation.remark',
                                defaultMessage: '备注'
                            })}>{data.remark}
                            </Description>
                        </DescriptionList>
                    </Card>
                </Modal>
            </div>
        );
    }
}

ModeDetail.propTypes = {
    detail: PropTypes.object,
    intl: PropTypes.object,
    showPanel: PropTypes.bool,
    onCancel: PropTypes.func
};
export default injectIntl(ModeDetail);
